<template>
    <div class="address">
        <van-nav-bar title="编辑收货地址" left-arrow @click-left="backUp"></van-nav-bar>
        <van-address-edit
                :area-list="areaList"
                :address-info="addressInfo"
                show-delete
                @save="editAddress"
                @delete="deleteAddress"
        />
    </div>
</template>
<script>
    import areaList from "@/assets/area.js";
    import {AddressEdit, Toast, NavBar} from "vant";
    import api from "@/utils/api";

    export default {
        components: {
            [AddressEdit.name]: AddressEdit,
            [Toast.name]: Toast,
            [NavBar.name]: NavBar
        },
        data() {
            return {
                areaList,
                addressInfo: {}
            };
        },
        mounted() {
            this.useraddress();
        },
        methods: {
            useraddress() {
                this.$axios({
                    method: "GET",
                    url: api.useraddress,
                    params: {
                        token: localStorage.getItem("token"),
                        address_id: this.$route.params.address_id
                    }
                }).then(res => {
                    let address = res;
                    let addressInfo = {
                        id: address.addId,
                        consignee: address.user_name,
                        tel: address.phone,
                        province: address.province,
                        city: address.city,
                        county: address.region,
                        areaCode: address.code,
                        addressDetail: address.address
                    };
                    this.addressInfo = addressInfo;
                });
            },
            editAddress(e) {
                let addressObj = {
                    token: localStorage.getItem("token"),
                    shippingId: this.$route.params.address_id,
                    consignee: e.name,
                    phone: e.tel,
                    code: e.areaCode,
                    province: e.province,
                    city: e.city,
                    region: e.county,
                    address: e.addressDetail
                };
                this.$axios({
                    method: "POST",
                    url: api.useraddress,
                    data: this.$qs.stringify(addressObj)
                }).then(res => {
                    console.log(res);
                    this.$toast("修改成功");
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                });
            },
            deleteAddress(addId) {
                this.$axios({
                    method: "POST",
                    url: api.shippingDelete,
                    data: this.$qs.stringify({
                        token: localStorage.getItem("token"),
                        shippingId: this.$route.params.address_id
                    })
                }).then(res => {
                    console.log(res);
                    Toast(res.msg);
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                });
            },
            backUp() {
                this.$router.go(-1);
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .address {
        background-color: @borderColor;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .van-address-edit__buttons {
        background-color: @borderColor;
    }
</style>